<style>
.not-active {
   pointer-events: none;
   cursor: default;
}
</style>

<template>
  <div>
    <http-busy>
      <div class=" col-md-12 col-lg-12 ">
        <div style="align:center">
          <!-- <span class="glyphicon glyphicon-menu-left" @click="$back()"></span> -->
          <span><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;安检计划下载</b></span>
        </div>
        <br/>
        <form>
          <div class="form-group" align="center">
            <label for="c_plan_year">计划年份：</label>
            <v-select id="c_plan_year" :value.sync="c_plan_year"
            :options='c_year_list' close-on-select clear-button></v-select>
          </div>
        </form>
        <!-- <center> -->
          <!-- <table align="center"> -->
            <!-- <tr v-for="row in model.rows"> -->
              <!-- <td align="center"> -->
                <center>
                <table class="table table-striped" v-for="row in model.rows">
                  <tr>
                    <td width=9% align="right"><img src="../../../static/optionright.png" width="25" height="25"></img></td>
                    <td colspan="2">计划名称&nbsp;&nbsp;&nbsp;&nbsp;
                    <!-- <td><a href="#" :class="[(row.downloaded  || !android) ? '' : 'not-active']"  @click="showPlanItems(row.id)" class="btn btn-link">{{row.f_plan_name}}</a></td> -->
                    <a href="#"  @click="showPlanItems(row.id)" class="btn btn-link">{{row.f_plan_name}}(点击进入"安检详情")</a></td>

                  </tr>
                  <tr>
                    <td></td>
                    <td>年/月</td>
                    <td>{{row.f_plan_year}}年{{row.f_plan_month}}月</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>户数</td>
                    <td>{{row.cnt}}</td>
                  </tr>
                  <!-- <tr>
                    <td>户数/已检/已审/未检</td>
                    <td>{{row.cnt}}/{{row.checked}}/{{row.verifiedcnt}}/{{row.unchecked}}</td>
                  </tr> -->
                  <tr>
                    <td></td>
                    <td>已检</td>
                    <td>{{row.checked}}</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>已审</td>
                    <td>{{row.verifiedcnt}}</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>未检</td>
                    <td>{{row.unchecked}}</td>
                  </tr>
                  <!-- <tr>
                    <td>最后安检状态:入户/拒检/到访不遇</td>
                    <td>{{row.centry}}/{{row.cdeny}}/{{row.cabsent}}</td>
                  </tr> -->
                  <tr>
                    <td width=9% align="right"><img src="../../../static/optionright.png" width="25" height="25"></img></td>
                    <td>最后安检状态</td>
                    <td></td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>入户</td>
                    <td>{{row.centry}}</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>拒检</td>
                    <td>{{row.cdeny}}</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>到访不遇</td>
                    <td>{{row.cabsent}}</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td></td>
                    <!-- <td><button :disabled="row.downloaded" @click="download(row, $index)" class="btn btn-primary">下载</button></td> -->
                    <td><button  @click="download(row, $index)" class="btn btn-primary">下载</button></td>
                  </tr>
                </table>
                <hr class="bg" />
                <!-- <center>
              </td>
            </tr>
          </table> -->
        </center>
      </div>
    </http-busy>
    <div style="height:50px;"></div>
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  title: '安检计划界面',
  data() {
    let options = []
    let year = (new Date()).getFullYear()
    options.push({label: (year-1) + '', value: (year-1) + ''})
    options.push({label: year+'', value: year+''})
    year++
    options.push({label: year+'', value: year+''})
    return {
      user: Vue.user,
      c_plan_year: options[1].value,
      c_year_list: options,
      model: {
        rows: []
      },
      android: Vue.android
    }
  },
  methods: {
    last() {
      this.$dispatch('states')
    },
    getPlan() {
      this.$post(Vue.url + 'sql/提取安检计划', {data:{f_checker_id: this.user.id, f_checker: this.user.name, f_plan_year: this.c_plan_year[0]}}, {resolveMsg: null, rejectMsg: null}).then(
        (response) => {
          console.log('sjdfgkjdshfudisyfhuidshfiudshfg',response.data)
          this.$set('model.rows', response.data)
          let ids = ''
          let that = this
          this.model.rows.forEach(function(row, index){
//            that.$set("model.rows[" + index + "].downloaded", false)
            that.$set("model.rows[" + index + "].checked", 0)
            that.$set("model.rows[" + index + "].unchecked", that.model.rows[index].cnt)
            ids += ',\'' + row.id + '\''
          })
          let records = [{id:'4028811d569c3f7201569c3ffd86000a'}, {id:'4028811d569c3f7201569c3ffdb4000e'}]
          if(Vue.android) {
            records = HostApp._executeTask({'type':'sql','data':{'alias':'已下载计划','criteria':{'ids': ids.substring(1)}}})
            console.log('result:' + JSON.stringify(records))
            records = records.data.rows
          }
          records.forEach(function(record) {
            that.model.rows.forEach(function (row) {
              if(row.id == record.id) {
                row.downloaded = true
                row.checked = record.cnt
                row.unchecked = row.cnt - record.cnt
              }
            })
          })
        }
      ).catch(
        (response) => {
          HostApp.alert('提取数据失败。')
        }
      )
    },
    callback(index, succeed) {
      console.log(index)
      if(!succeed) {
          this.$showMessage('下载失败')
          return
      }
      let row = HostApp.__this__.model.rows[index]
//      row.downloaded = true
//      console.log(row.downloaded)
      HostApp.__callback__ = null
      HostApp.__this__ = null
    },
    download(row, index) {
      this.$showMessage('确认进行下载吗？', ['cancel', 'confirm']).then(
        (response) => {
          if (response === 'confirm') {
            HostApp.__callback__ = this.callback
            HostApp.__this__ = this
          //  this.$set("model.rows[" + index + "].downloaded", false)
            HostApp.downloadPlan({id: row.id, index: index})
          }
        }
      )
      },
    showPlanItems(f_plan_id) {
      this.$goto('res-area-list', {f_plan_id: f_plan_id}, 'self', this.refresh)
    },
    refresh() {
      this.getPlan()
    }
  },
  ready() {
      console.log("check plan ready")
      this.$watch('c_plan_year', function (val) {
          this.getPlan()
      })
      this.refresh()
  }
}
</script>
